<template>
  <el-drawer :title="title" :visible.sync="open" @close="onClose" size="70%" :wrapperClosable="false"
    :close-on-press-escape="false" append-to-body>
    <el-form v-loading="loading" ref="form" :model="form" :disabled="disabled" label-width="auto" class="form">
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品" prop="bankAccountType"
            :rules="[{ required: true, message: '请选择产品', trigger: 'change' }]">
            <el-select v-model="form.bankAccountType">
              <el-option value="SSQY-MC" label="苏商银行" />
              <el-option value="HT-MC" label="华通银行" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="店铺账户" prop="shopId" :rules="[{ required: true, message: '请选择店铺账户', trigger: 'blur' }]">
            <el-select @change="$forceUpdate()" filterable v-model="form.shopId" placeholder="请选择店铺账户" clearable
              style="width: 240px">
              <el-option v-for="item in shopList" :key="item.id" :label="item.nickName" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="费率" prop="feeRate" :rules="[{ required: true, message: '请输入费率', trigger: 'blur' }]">
            <el-input-number :step="0.1" :min="0.1" :max="15" :precision="2" v-model.number="form.feeRate"
              placeholder="请输入费率" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">资质信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商户类型" prop="merchantType"
            :rules="[{ required: true, message: '请选择商户类型', trigger: 'blur' }]">
            <el-select v-model="form.merchantType" placeholder="请选择商户类型" clearable style="width: 240px">
              <el-option label="企业" value="COMPANY" />
              <el-option label="个体户" value="INDIVIDUAL" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="营业执照" prop="licenseImg" :rules="[{ required: true, message: '必须上传营业执照' }]">
            <IncomingFileUpload v-model="form.licenseImg" @input="uploadLicenseImg" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户许可证" prop="bankImg" :rules="[{ required: true, message: '必须上传开户许可证' }]">
            <IncomingFileUpload v-model="form.bankImg" @input="uploadBankImg" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="公司全称" prop="customerName"
            :rules="[{ required: true, message: '必须输入公司全称', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <name-input v-model="form.customerName" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="社会统一信用代码" prop="licenseNum"
            :rules="[{ required: true, message: '必须输入社会统一信用代码', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <name-input v-model="form.licenseNum" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="营业执照所在地" prop="licenseAddress"
            :rules="[{ required: true, message: '必须输入营业执照所在地', trigger: 'blur' }, { type: 'string', max: 64, message: '不能超过64个字符' }]">
            <name-input v-model="form.licenseAddress" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="营业开始时间" prop="operationStartTerm"
            :rules="[{ required: true, message: '必须输入营业开始时间', trigger: 'blur' }]">
            <el-date-picker v-model="form.operationStartTerm" placeholder="如: 2020-01-01" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="营业期限" prop="operationEndTerm"
            :rules="[{ required: true, message: '必须输入营业期限', trigger: 'blur' }]">
            <el-date-picker v-model="form.operationEndTerm" placeholder="如: 2030-12-31" value-format="yyyy-MM-dd"
              :disabled="form.operationEndTermLong" />
            <el-checkbox v-model="form.operationEndTermLong" @change="operationEndTermLongChange">长期</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">银行信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="账户类型" prop="bankType" :rules="[{ required: true, message: '请选择账户类型', trigger: 'blur' }]">
            <el-select v-model="form.bankType" placeholder="请选择账户类型" clearable style="width: 100%">
              <el-option label="对私" value="1" />
              <el-option label="对公" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="户名" prop="accountName"
            :rules="[{ required: true, message: '请输入账户名', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <name-input v-model="form.accountName" placeholder="请输入账户名" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行" prop="bankName"
            :rules="[{ required: true, message: '请输入开户行', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <name-input v-model="form.bankName" placeholder="请输入开户行" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行卡号" prop="bankAccount"
            :rules="[{ required: true, message: '请输入银行卡号', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <code-input v-model="form.bankAccount" placeholder="请输入银行卡号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行省份" prop="bankProvince"
            :rules="[{ required: true, message: '请输入开户行省份', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <name-input v-model="form.bankProvince" placeholder="请输入开户行省份" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行城市" prop="bankCity"
            :rules="[{ required: true, message: '请输入开户行城市', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <name-input v-model="form.bankCity" placeholder="请输入开户行城市" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开户行地址" prop="bankAddress"
            :rules="[{ required: true, message: '请输入开户行地址', trigger: 'blur' }, { type: 'string', max: 64, message: '不能超过64个字符' }]">
            <name-input v-model="form.bankAddress" placeholder="请输入开户行地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">法人信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身份证人像面" prop="legalFrontImg" :rules="[{ required: true, message: '必须上传身份证人像面' }]">
            <IncomingFileUpload v-model="form.legalFrontImg" @input="uploadLegalFrontImg" api="/common/upload"
              :limit="1" :fileSize="5" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证国徽面" prop="legalBackImg" :rules="[{ required: true, message: '必须上传身份证国徽面' }]">
            <IncomingFileUpload v-model="form.legalBackImg" @input="uploadLegalBackImg" api="/common/upload" :limit="1"
              :fileSize="5" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="法人姓名" prop="legalName"
            :rules="[{ required: true, message: '请输入法人姓名', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <name-input v-model="form.legalName" placeholder="请输入法人姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人证件类型" prop="corporationCertificatesType"
            :rules="[{ required: true, message: '请选择法人证件类型', trigger: 'blur' }]">
            <el-select v-model="form.corporationCertificatesType">
              <el-option value="0" label="身份证" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人证件号码" prop="idCard"
            :rules="[{ required: true, message: '请输入法人证件号码', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <code-input v-model="form.idCard" placeholder="请输入法人证件号码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人证件开始时间" prop="legalStartDate"
            :rules="[{ required: true, message: '必须输入法人证件开始时间', trigger: 'blur' }]">
            <el-date-picker v-model="form.legalStartDate" placeholder="如: 2020-01-01" value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="法人证件结束时间" prop="legalEndDate"
            :rules="[{ required: true, message: '必须输入法人证件结束时间', trigger: 'blur' }]">
            <el-date-picker v-model="form.legalEndDate" placeholder="如: 2030-12-31" value-format="yyyy-MM-dd"
              :disabled="form.legalEndDateLong" />
            <el-checkbox v-model="form.legalEndDateLong" @change="legalEndDateLongChange">长期</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人联系手机" prop="linkMobile"
            :rules="[{ required: true, message: '请输入法人联系手机', trigger: 'blur' }, { type: 'string', max: 16, message: '不能超过16个字符' }]">
            <code-input v-model="form.linkMobile" placeholder="请输入法人联系手机" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="法人地址" prop="legalAddress"
            :rules="[{ required: true, message: '请输入法人地址', trigger: 'blur' }, { type: 'string', max: 64, message: '不能超过64个字符' }]">
            <el-input v-model="form.legalAddress" placeholder="请输入法人地址" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人是否为联系人" prop="legalIsLink">
            <el-switch v-model="form.legalIsLink" active-value="1" inactive-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人是否为股东" prop="legalIsShareholder">
            <el-switch v-model="form.legalIsShareholder" active-value="1" inactive-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="法人是否为受益人" prop="legalIsBeneficiary">
            <el-switch v-model="form.legalIsBeneficiary" active-value="1" inactive-value="0" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">联系人</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="注册地址" prop="registeredAddress"
            :rules="[{ required: true, message: '请输入注册地址', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <el-input v-model="form.registeredAddress" placeholder="请输入注册地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公地址" prop="workingAddress"
            :rules="[{ required: true, message: '请输入办公地址', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <el-input v-model="form.workingAddress" placeholder="请输入办公地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系地址" prop="address"
            :rules="[{ required: true, message: '请输入注册地址', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <el-input v-model="form.address" placeholder="请输入联系地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际经营地址" prop="actualOperatingAddress"
            :rules="[{ required: true, message: '请输入注册地址', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <el-input v-model="form.actualOperatingAddress" placeholder="请输入实际经营地址" />
          </el-form-item>
        </el-col>
        <template v-if="form.legalIsLink !== '1'">
          <el-col :span="12">
            <el-form-item label="联系人身份证人像面" prop="certificatesFrontImg"
              :rules="[{ required: true, message: '必须上传联系人身份证人像面' }]">
              <IncomingFileUpload v-model="form.certificatesFrontImg" @input="uploadCertificatesFrontImg"
                api="/common/upload" :limit="1" :fileSize="5" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人身份证国徽面" prop="certificatesBackImg"
              :rules="[{ required: true, message: '必须上传联系人身份证国徽面' }]">
              <IncomingFileUpload v-model="form.certificatesBackImg" @input="uploadCertificatesBackImg"
                api="/common/upload" :limit="1" :fileSize="5" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人姓名" prop="businessName"
              :rules="[{ required: true, message: '请输入联系人姓名', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
              <name-input v-model="form.businessName" placeholder="请输入联系人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人证件类型" prop="certificatesType"
              :rules="[{ required: true, message: '请选择联系人证件类型', trigger: 'blur' }]">
              <el-select v-model="form.certificatesType">
                <el-option value="0" label="身份证" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人证件号码" prop="certificatesNumber"
              :rules="[{ required: true, message: '请输入联系人证件号码', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
              <code-input v-model="form.certificatesNumber" placeholder="请输入联系人证件号码" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人证件开始时间" prop="certificatesStartDate"
              :rules="[{ required: true, message: '必须输入联系人证件开始时间', trigger: 'blur' }]">
              <el-date-picker v-model="form.certificatesStartDate" placeholder="如: 2020-01-01"
                value-format="yyyy-MM-dd" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="联系人证件结束时间" prop="certificatesExpiryDate"
              :rules="[{ required: true, message: '必须输入联系人证件结束时间', trigger: 'blur' }]">
              <el-date-picker v-model="form.certificatesExpiryDate" placeholder="如: 2030-12-31"
                value-format="yyyy-MM-dd" :disabled="form.certificatesExpiryDateLong" />
              <el-checkbox v-model="form.certificatesExpiryDateLong"
                @change="certificatesExpiryDateLongChange">长期</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人手机" prop="businessPhone"
              :rules="[{ required: true, message: '请输入联系人手机', trigger: 'blur' }, { type: 'string', max: 16, message: '不能超过16个字符' }]">
              <code-input v-model="form.businessPhone" placeholder="请输入联系人手机" />
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="8">
          <el-form-item label="联系人邮箱" prop="businessEmail"
            :rules="[{ required: true, message: '请输入联系人邮箱', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
            <el-input v-model="form.businessEmail" placeholder="请输入联系人邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">经营信息</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="经营模式" prop="businessType"
            :rules="[{ required: true, message: '请选择经营模式', trigger: 'change' }]">
            <el-select v-model="form.businessType">
              <el-option v-for="o in baofuBusinessType" :key="o.value" :label="o.label" :value="o.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经营细类" prop="industryTypeId"
            :rules="[{ required: true, message: '请选择经营细类', trigger: 'change' }]">
            <el-select v-model="form.industryTypeId" @change="industryTypeIdChange" filterable>
              <el-option v-for="o in baofuIndustryType" :key="o.value" :label="o.label" :value="o.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="经营描述说明" prop="businessDesc"
            :rules="[{ required: true, message: '请输入经营描述说明', trigger: 'blur' }, { type: 'string', max: 128, message: '不能超过128个字符' }]">
            <el-input v-model="form.businessDesc" placeholder="请描述业务模式和涉及角色、职责及合作方" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-table :data="form.contextList">
        <el-table-column label="经营场景信息">
          <template #default="{ row, $index }">
            <el-row>
              <el-col :span="8">
                <el-form-item label="经营类型" :prop="`contextList.${$index}.contextType`"
                  :rules="[{ required: true, message: '请选择经营类型', trigger: 'change' }]">
                  <el-select v-model="row.contextType">
                    <el-option value="1" label="线下" />
                    <el-option value="2" label="APP" />
                    <el-option value="3" label="网页端" />
                    <el-option value="4" label="小程序" />
                    <el-option value="5" label="H5" />
                    <el-option value="6" label="公众号" />
                    <el-option value="7" label="快应用" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="['2', '4', '6', '7'].indexOf(row.contextType) >= 0">
                <el-form-item label="应用名称" :prop="`contextList.${$index}.contextName`"
                  :rules="[{ required: true, message: '请输入应用名称', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
                  <el-input v-model="row.contextName" />
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="['2', '3', '5'].indexOf(row.contextType) >= 0">
                <el-form-item label="链接地址" :prop="`contextList.${$index}.contextAdd`"
                  :rules="[{ required: true, message: '请输入链接地址', trigger: 'blur' }, { type: 'string', max: 64, message: '不能超过64个字符' }]">
                  <el-input v-model="row.contextAdd"
                    :placeholder="(row.contextType == '2') ? '请输入APP下载链接' : '请输入链接地址'" />
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="['3', '4', '5', '7'].indexOf(row.contextType) >= 0">
                <el-form-item label="备案号" :prop="`contextList.${$index}.contextBelongNo`"
                  :rules="[{ type: 'string', max: 32, message: '不能超过32个字符' }]">
                  <el-input v-model="row.contextBelongNo" placeholder="请输入备案号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-if="['1', '2', '4', '6', '7'].indexOf(row.contextType) >= 0">
                <el-form-item label="照片或截图" :prop="`contextList.${$index}.contextImg`"
                  :rules="[{ required: true, message: '请上传照片或截图' }]">
                  <IncomingFileUpload v-model="row.contextImg" api="/common/upload" :limit="1" :fileSize="5" />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column width="100" align="center">
          <template #header>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="form.contextList.push({
              certificatesFrontImg: '', certificatesBackImg: '', name: '', certificatesType: '', certificatesNumber: '',
              certificatesStartDate: '', certificatesExpiryDate: '', certificatesExpiryDateLong: false, beneficiaryMobile: '', address: '',
            })">添加</el-button>
          </template>
          <template #default="{ $index }">
            <el-button type="danger" icon="el-icon-delete" size="mini"
              @click="form.contextList.splice($index, 1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item label-width="0" prop="contextList" :rules="[{ required: true, message: '必须添加经营场景信息' }]" />
      <template v-if="form.legalIsShareholder !== '1'">
        <el-table :data="form.shareholderList1">
          <el-table-column label="股东信息">
            <template #default="{ row, $index }">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证人像面" :prop="`shareholderList1.${$index}.certificatesFrontImg`"
                    :rules="[{ required: true, message: '必须上传身份证人像面', trigger: 'change' }]">
                    <IncomingFileUpload v-model="row.certificatesFrontImg"
                      @input="uploadShareholderFrontImg(row, $event)" api="/common/upload" :limit="1" :fileSize="5" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证国徽面" :prop="`shareholderList1.${$index}.certificatesBackImg`"
                    :rules="[{ required: true, message: '必须上传身份证国徽面', trigger: 'change' }]">
                    <IncomingFileUpload v-model="row.certificatesBackImg" @input="uploadShareholderBackImg(row, $event)"
                      api="/common/upload" :limit="1" :fileSize="5" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名" :prop="`shareholderList1.${$index}.name`"
                    :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
                    <name-input v-model="row.name" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证件类型" :prop="`shareholderList1.${$index}.certificatesType`"
                    :rules="[{ required: true, message: '请选择证件类型', trigger: 'change' }]">
                    <el-select v-model="row.certificatesType">
                      <el-option value="0" label="身份证" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证件号码" :prop="`shareholderList1.${$index}.certificatesNumber`"
                    :rules="[{ required: true, message: '请输入证件号码', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
                    <code-input v-model="row.certificatesNumber" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开始时间" :prop="`shareholderList1.${$index}.certificatesStartDate`"
                    :rules="[{ required: true, message: '请输入证件开始时间', trigger: 'blur' }]">
                    <el-date-picker v-model="row.certificatesStartDate" placeholder="如: 2020-01-01"
                      value-format="yyyy-MM-dd" />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="结束时间" :prop="`shareholderList1.${$index}.certificatesExpiryDate`"
                    :rules="[{ required: true, message: '请输入证件结束时间', trigger: 'blur' }]">
                    <el-date-picker v-model="row.certificatesExpiryDate" placeholder="如: 2030-12-31"
                      value-format="yyyy-MM-dd" :disabled="row.certificatesExpiryDateLong" />
                    <el-checkbox v-model="row.certificatesExpiryDateLong"
                      @change="shareholderExpiryDateLongChange(row, $event)">长期</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="手机号" :prop="`shareholderList1.${$index}.beneficiaryMobile`"
                    :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { type: 'string', max: 16, message: '不能超过16个字符' }]">
                    <code-input v-model="row.beneficiaryMobile" />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="地址" :prop="`shareholderList1.${$index}.address`"
                    :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }, { type: 'string', max: 64, message: '不能超过64个字符' }]">
                    <el-input v-model="row.address" />
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column width="100">
            <template #header>
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="form.shareholderList1.push({
                type: '01', name: '', certificatesType: '', beneficiaryMobile: '', certificatesNumber: '',
                certificatesStartDate: '', certificatesExpiryDate: '', certificatesExpiryDateLong: false,
                address: '', certificatesFrontImg: '', certificatesBackImg: '', state: '1',
              })">添加</el-button>
            </template>
            <template #default="{ $index }">
              <el-button type="danger" icon="el-icon-delete" size="mini"
                @click="form.shareholderList1.splice($index, 1)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label-width="0" prop="shareholderList1" :rules="[{ required: true, message: '必须添加股东信息' }]" />
      </template>
      <template v-if="form.legalIsBeneficiary !== '1'">
        <el-table :data="form.shareholderList2">
          <el-table-column label="受益人信息">
            <template #default="{ row, $index }">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="身份证人像面" :prop="`shareholderList2.${$index}.certificatesFrontImg`"
                    :rules="[{ required: true, message: '必须上传身份证人像面', trigger: 'change' }]">
                    <IncomingFileUpload v-model="row.certificatesFrontImg"
                      @input="uploadShareholderFrontImg(row, $event)" api="/common/upload" :limit="1" :fileSize="5" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份证国徽面" :prop="`shareholderList2.${$index}.certificatesBackImg`"
                    :rules="[{ required: true, message: '必须上传身份证国徽面', trigger: 'change' }]">
                    <IncomingFileUpload v-model="row.certificatesBackImg" @input="uploadShareholderBackImg(row, $event)"
                      api="/common/upload" :limit="1" :fileSize="5" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="姓名" :prop="`shareholderList2.${$index}.name`"
                    :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
                    <name-input v-model="row.name" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证件类型" :prop="`shareholderList2.${$index}.certificatesType`"
                    :rules="[{ required: true, message: '请选择证件类型', trigger: 'change' }]">
                    <el-select v-model="row.certificatesType">
                      <el-option value="0" label="身份证" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="证件号码" :prop="`shareholderList2.${$index}.certificatesNumber`"
                    :rules="[{ required: true, message: '请输入证件号码', trigger: 'blur' }, { type: 'string', max: 32, message: '不能超过32个字符' }]">
                    <code-input v-model="row.certificatesNumber" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开始时间" :prop="`shareholderList2.${$index}.certificatesStartDate`"
                    :rules="[{ required: true, message: '请输入证件开始时间', trigger: 'blur' }]">
                    <el-date-picker v-model="row.certificatesStartDate" placeholder="如: 2020-01-01"
                      value-format="yyyy-MM-dd" />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="结束时间" :prop="`shareholderList2.${$index}.certificatesExpiryDate`"
                    :rules="[{ required: true, message: '请输入证件结束时间', trigger: 'blur' }]">
                    <el-date-picker v-model="row.certificatesExpiryDate" placeholder="如: 2030-12-31"
                      value-format="yyyy-MM-dd" :disabled="row.certificatesExpiryDateLong" />
                    <el-checkbox v-model="row.certificatesExpiryDateLong"
                      @change="shareholderExpiryDateLongChange(row, $event)">长期</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="手机号" :prop="`shareholderList2.${$index}.beneficiaryMobile`"
                    :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { type: 'string', max: 16, message: '不能超过16个字符' }]">
                    <code-input v-model="row.beneficiaryMobile" />
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="地址" :prop="`shareholderList2.${$index}.address`"
                    :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }, { type: 'string', max: 64, message: '不能超过64个字符' }]">
                    <el-input v-model="row.address" />
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column width="100">
            <template #header>
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="form.shareholderList2.push({
                type: '02', name: '', certificatesType: '', beneficiaryMobile: '', certificatesNumber: '',
                certificatesStartDate: '', certificatesExpiryDate: '', certificatesExpiryDateLong: false,
                address: '', certificatesFrontImg: '', certificatesBackImg: '', state: '1',
              })">添加</el-button>
            </template>
            <template #default="{ $index }">
              <el-button type="danger" icon="el-icon-delete" size="mini"
                @click="form.shareholderList2.splice($index, 1)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label-width="0" prop="shareholderList2" :rules="[{ required: true, message: '必须添加受益人信息' }]" />
      </template>
      <el-divider content-position="left">补充信息</el-divider>
      <el-row>
        <el-col :span="24">
          <el-form-item label="补充其他说明" prop="note" :rules="[{ type: 'string', max: 128, message: '不能超过128个字符' }]">
            <el-input v-model="form.note" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="补充证明材料" prop="noteImg">
            <IncomingFileUpload v-model="form.noteImg" @input="uploadLicenseImg" api="/common/upload" :limit="10"
              :fileSize="5" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer-operation">
      <el-button @click=" open = false">返回</el-button>
      <template v-if="!disabled && !!form.shopId">
        <el-button :loading="loading" type="success" @click="save" v-clickOnce>保存草稿</el-button>
        <el-button :loading="loading" type="primary" @click="submit" v-clickOnce>提交</el-button>
      </template>
    </div>
  </el-drawer>
</template>
<script>
import { listShop } from '@/api/ecs/shop'
import IncomingFileUpload from '@/components/IncomingFileUpload/index.vue'
import { baofuBusinessType, baofuIndustryType } from '@/api/ecs/baofu'
import { findBaofuMerchant, addBaofuMerchant, editBaofuMerchant, submitBaofuMerchant } from '@/api/ecs/baofu'
import { ocrIdCard, ocrBankCard, ocrBusinessLicense } from '@/api/ecs/baiduOcr'

export default {
  name: 'BaofuMerchantEditor',
  components: { IncomingFileUpload, },
  data() {
    return {
      baofuBusinessType,
      baofuIndustryType,
      open: false,
      title: '',
      loading: false,
      disabled: false,
      form: {
        bankAccountType: '',
        shopId: undefined,
        feeRate: 0.1,
        step: '0',
        merchantType: '',
        licenseImg: '',
        bankImg: '',
        customerName: '',
        licenseNum: '',
        licenseAddress: '',
        operationStartTerm: '',
        operationEndTerm: '',
        bankType: '',
        bankAccount: '',
        accountName: '',
        bankName: '',
        bankProvince: '',
        bankCity: '',
        bankAddress: '',
        legalFrontImg: '',
        legalBackImg: '',
        legalName: '',
        corporationCertificatesType: '',
        idCard: '',
        legalStartDate: '',
        legalEndDate: '',
        linkMobile: '',
        legalAddress: '',
        legalIsBeneficiary: '0',
        legalIsShareholder: '0',
        legalIsLink: '0',
        workingAddress: '',
        address: '',
        actualOperatingAddress: '',
        registeredAddress: '',
        certificatesFrontImg: '',
        certificatesBackImg: '',
        businessName: '',
        certificatesType: '',
        certificatesNumber: '',
        certificatesStartDate: '',
        certificatesExpiryDate: '',
        businessPhone: '',
        businessEmail: '',
        businessType: '',
        industryTypeId: '',
        businessDesc: '',
        contextList: [],
        shareholderList: [],
        shareholderList1: [],
        shareholderList2: [],
      },
      shopList: [],
      showResolve: (value) => { },
      showReject: (reason) => { },
    }
  },
  created() {
    listShop({ page: 1, pageSize: 1000000 }).then(res => {
      this.shopList = res.rows
    })
  },
  methods: {
    show(id, disabled = false) {
      if (id) {
        this.form.id = id
        this.load()
        this.title = '商户详情'
      } else {
        this.form = {
          shopId: undefined,
          feeRate: undefined,
          step: '0',
          legalIsBeneficiary: '1', legalIsShareholder: '1', legalIsLink: '1',
          merchantType: '',
          licenseImg: '', bankImg: '', customerName: '', licenseNum: '', licenseAddress: '',
          operationStartTerm: '', operationEndTerm: '', operationEndTermLong: false,
          bankType: '', accountName: '', bankName: '', bankAccount: '', bankProvince: '', bankCity: '', bankAddress: '',
          legalFrontImg: '', legalBackImg: '', legalName: '', corporationCertificatesType: '', idCard: '',
          legalStartDate: '', legalEndDate: '', legalEndDateLong: false, linkMobile: '', legalAddress: '',
          workingAddress: '', address: '', actualOperatingAddress: '', registeredAddress: '',
          certificatesFrontImg: '', certificatesBackImg: '', businessName: '', certificatesType: '', certificatesNumber: '',
          certificatesStartDate: '', certificatesExpiryDate: '', certificatesExpiryDateLong: false,
          businessPhone: '', businessEmail: '', businessType: '', industryTypeId: '',
          businessDesc: '', note: '', noteImg: '',
          contextList: [],
          shareholderList: [],
          shareholderList1: [],
          shareholderList2: [],
        }
        this.title = '新增商户'
      }
      this.disabled = disabled
      this.open = true
      return new Promise((resolve, reject) => {
        this.showResolve = resolve
        this.showReject = reject
      });
    },
    onClose() {
      this.$refs.form?.resetFields()
    },
    load() {
      findBaofuMerchant(this.form.id).then(res => {
        this.form = { ...res.data }
        this.form.operationEndTermLong = (this.form.operationEndTerm == '9999-12-31')
        this.form.legalEndDateLong = (this.form.legalEndDate == '9999-12-31')
        this.form.certificatesExpiryDateLong = (this.form.certificatesExpiryDate == '9999-12-31')
        this.form.shareholderList.forEach(row => {
          row.certificatesExpiryDateLong = (row.certificatesExpiryDate == '9999-12-31')
        })
        this.form.shareholderList1 = this.form.shareholderList.filter(row => row.type === '01')
        this.form.shareholderList2 = this.form.shareholderList.filter(row => row.type === '02')
      })
    },
    beforeSave() {
      if (this.form.legalIsLink === '1') {
        this.form.certificatesFrontImg = this.form.legalFrontImg
        this.form.certificatesBackImg = this.form.legalBackImg
        this.form.businessName = this.form.legalName
        this.form.certificatesType = this.form.corporationCertificatesType
        this.form.certificatesNumber = this.form.idCard
        this.form.certificatesStartDate = this.form.legalStartDate
        this.form.certificatesExpiryDate = this.form.legalEndDate
        this.form.certificatesExpiryDateLong = this.form.legalEndDateLong
        this.form.businessPhone = this.form.linkMobile
      }
      if (this.form.legalIsShareholder === '1') {
        this.form.shareholderList1 = [{
          type: '01',
          certificatesFrontImg: this.form.legalFrontImg,
          certificatesBackImg: this.form.legalBackImg,
          name: this.form.legalName,
          certificatesType: this.form.corporationCertificatesType,
          certificatesNumber: this.form.idCard,
          certificatesStartDate: this.form.legalStartDate,
          certificatesExpiryDate: this.form.legalEndDate,
          certificatesExpiryDateLong: this.form.legalEndDateLong,
          beneficiaryMobile: this.form.linkMobile,
          address: this.form.legalAddress,
          state: '1',
        }]
      }
      if (this.form.legalIsBeneficiary === '1') {
        this.form.shareholderList2 = [{
          type: '02',
          certificatesFrontImg: this.form.legalFrontImg,
          certificatesBackImg: this.form.legalBackImg,
          name: this.form.legalName,
          certificatesType: this.form.corporationCertificatesType,
          certificatesNumber: this.form.idCard,
          certificatesStartDate: this.form.legalStartDate,
          certificatesExpiryDate: this.form.legalEndDate,
          certificatesExpiryDateLong: this.form.legalEndDateLong,
          beneficiaryMobile: this.form.linkMobile,
          address: this.form.legalAddress,
          state: '1',
        }]
      }
      this.form.shareholderList = [].concat(this.form.shareholderList1, this.form.shareholderList2)
    },
    save() {
      this.beforeSave()
      if (this.form.id) {
        editBaofuMerchant(this.form).then(res => {
          if (res.code === 200) {
            this.open = false
            this.showResolve()
          }
        })
      } else {
        addBaofuMerchant(this.form).then(res => {
          if (res.code === 200) {
            this.open = false
            this.showResolve()
          }
        })
      }
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.beforeSave()
          if (this.form.id) {
            editBaofuMerchant(this.form).then(res => {
              if (res.code === 200) {
                return submitBaofuMerchant(this.form)
              }
            }).then(res => {
              if (res.code === 200) {
                this.open = false
                this.showResolve()
              }
            })
          } else {
            addBaofuMerchant(this.form).then(res => {
              if (res.code === 200) {
                this.form.id = res.data
                return submitBaofuMerchant(this.form);
              }
            }).then(res => {
              if (res.code === 200) {
                this.open = false
                this.showResolve()
              }
            })
          }
        }
      })
    },
    uploadLicenseImg(url) {
      if (!url) return;
      ocrBusinessLicense({ url }).then(res => {
        this.form.customerName = res.data.words_result?.单位名称?.words ?? this.form.customerName
        this.form.licenseNum = res.data.words_result?.社会信用代码?.words ?? this.form.licenseNum
        this.form.signType = ('个体工商户' == res.data.words_result?.类型?.words) ? 'INDIVIDUAL' : 'COMPANY'
        this.form.licenseAddress = res.data.words_result?.地址?.words ?? this.form.licenseAddress
        this.form.registeredAddress = this.form.licenseAddress
        if (/^\d+年\d+月\d+日/.test(res.data.words_result?.有效期起始日期?.words)) {
          this.form.operationStartTerm = res.data.words_result?.有效期起始日期?.words.replace('年', '-').replace('月', '-').replace('日', '')
        } else if (/^\d+年\d+月\d+日/.test(res.data.words_result?.成立日期?.words)) {
          this.form.operationStartTerm = res.data.words_result?.成立日期?.words.replace('年', '-').replace('月', '-').replace('日', '')
        }
        if (/^\d+年\d+月\d+日/.test(res.data.words_result?.有效期?.words)) {
          this.form.operationEndTerm = res.data.words_result?.有效期?.words.replace('年', '-').replace('月', '-').replace('日', '')
          this.form.operationEndTermLong = false
        } else {
          this.form.operationEndTerm = '9999-12-31'
          this.form.operationEndTermLong = true
        }
      })
    },
    uploadBankImg(url) {
      if (!url) return
      if (this.form.merchantType === 'INDIVIDUAL') {
        ocrBankCard({ url }).then(res => {
          if (res.code == 200 && res.data.result?.bank_card_type != 0) { //可以识别
            this.form.bankType = '1'
            this.form.bankAccount = res.data.result?.bank_card_number
          }
        })
      }
    },
    uploadLegalFrontImg(url) {
      if (!url) return
      ocrIdCard({ url, side: 'front' }).then(res => {
        this.form.legalName = res.data.words_result?.姓名?.words ?? this.form.legalName
        this.form.corporationCertificatesType = '0'
        this.form.idCard = res.data.words_result?.公民身份号码?.words ?? this.form.legalLicenceNo
        this.form.legalAddress = res.data.words_result?.住址?.words ?? this.form.legalAddress
      })
    },
    uploadLegalBackImg(url) {
      if (!url) return
      ocrIdCard({ url, side: 'back' }).then(res => {
        const dStart = res.data.words_result?.签发日期?.words
        if (/^\d{8}$/.test(dStart)) {
          this.form.legalStartDate = dStart.substring(0, 4) + '-' + dStart.substring(4, 6) + '-' + dStart.substring(6, 8)
        }
        const dEnd = res.data.words_result?.失效日期?.words
        if (/^\d{8}$/.test(dEnd)) {
          this.form.legalEndDateLong = false
          this.form.legalEndDate = dEnd.substring(0, 4) + '-' + dEnd.substring(4, 6) + '-' + dEnd.substring(6, 8)
        } else if (dEnd == '长期') {
          this.form.legalEndDateLong = true
          this.form.legalEndDate = '9999-12-31'
        }
      })
    },
    uploadCertificatesFrontImg(url) {
      if (!url) return
      ocrIdCard({ url, side: 'front' }).then(res => {
        this.form.businessName = res.data.words_result?.姓名?.words ?? this.form.legalName
        this.form.certificatesType = '0'
        this.form.certificatesNumber = res.data.words_result?.公民身份号码?.words ?? this.form.legalLicenceNo
      })
    },
    uploadCertificatesBackImg(url) {
      if (!url) return
      ocrIdCard({ url, side: 'back' }).then(res => {
        const dStart = res.data.words_result?.签发日期?.words
        if (/^\d{8}$/.test(dStart)) {
          this.form.certificatesStartDate = dStart.substring(0, 4) + '-' + dStart.substring(4, 6) + '-' + dStart.substring(6, 8)
        }
        const dEnd = res.data.words_result?.失效日期?.words
        if (/^\d{8}$/.test(dEnd)) {
          this.form.certificatesExpiryDateLong = false
          this.form.certificatesExpiryDate = dEnd.substring(0, 4) + '-' + dEnd.substring(4, 6) + '-' + dEnd.substring(6, 8)
        } else if (dEnd == '长期') {
          this.form.certificatesExpiryDateLong = true
          this.form.certificatesExpiryDate = '9999-12-31'
        }
      })
    },
    uploadShareholderFrontImg(row, url) {
      if (!url) return
      ocrIdCard({ url, side: 'front' }).then(res => {
        row.name = res.data.words_result?.姓名?.words ?? row.legalName
        row.certificatesType = '0'
        row.certificatesNumber = res.data.words_result?.公民身份号码?.words ?? row.legalLicenceNo
        row.address = res.data.words_result?.住址?.words ?? row.address
      })
    },
    uploadShareholderBackImg(row, url) {
      if (!url) return
      ocrIdCard({ url, side: 'back' }).then(res => {
        const dStart = res.data.words_result?.签发日期?.words
        if (/^\d{8}$/.test(dStart)) {
          row.certificatesStartDate = dStart.substring(0, 4) + '-' + dStart.substring(4, 6) + '-' + dStart.substring(6, 8)
        }
        const dEnd = res.data.words_result?.失效日期?.words
        if (/^\d{8}$/.test(dEnd)) {
          row.certificatesExpiryDateLong = false
          row.certificatesExpiryDate = dEnd.substring(0, 4) + '-' + dEnd.substring(4, 6) + '-' + dEnd.substring(6, 8)
        } else if (dEnd == '长期') {
          row.certificatesExpiryDateLong = true
          row.certificatesExpiryDate = '9999-12-31'
        }
      })
    },
    operationEndTermLongChange(val) {
      this.form.operationEndTerm = (val) ? '9999-12-31' : ''
    },
    legalEndDateLongChange(val) {
      this.form.legalEndDate = (val) ? '9999-12-31' : ''
    },
    certificatesExpiryDateLongChange(val) {
      this.form.certificatesExpiryDate = (val) ? '9999-12-31' : ''
    },
    industryTypeIdChange(val) {
      this.form.businessPrimaryTypeId = val.substring(0, 4)
      this.form.businessSecondaryTypeId = val
      this.form.industrySecondaryTypeId = val
    },
    shareholderExpiryDateLongChange(row, val) {
      row.certificatesExpiryDate = (val) ? '9999-12-31' : ''
    },
  },
}
</script>
<style scoped lang="scss">
.form {
  padding: 20px 20px 80px 20px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
